<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="vz-projector-data-loader.html">

<dom-module id='vz-projector'>
<template>
<style>

:host {
  display: flex;
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* Main */

#main {
  position: relative;
  flex-grow: 2;
}

#main .stage {
  position: relative;
  flex-grow: 2;
}

#scatter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#left-pane {
  display: flex;
  flex-direction: column;
  min-width: 312px;
  width: 312px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

#right-pane {
  min-width: 300px;
  width: 300px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

.file-name {
  margin-right: 5px;
}

.control label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 10px;
  font-weight: 500;
}

.control .info {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.2);
  margin-bottom: 18px;
  white-space: nowrap;
}

.control input[type=text] {
  font-weight: 300;
  font-size: 16px;
  display: block;
  padding: 8px 0;
  margin: 0 0 8px 0;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: none;
}

.slider {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
}

.slider span {
  width: 35px;
  text-align: right;
}

.control input[type=text]:focus {
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.control {
  display: inline-block;
  width: 45%;
  vertical-align: top;
  margin-right: 10px;
  overflow-x: hidden;
}

.control.last {
  margin-right: 0;
}

#wrapper-notify-msg {
  z-index: 1;
  position: fixed;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

#notify-msg {
  display: none;
  font-weight: 500;
  color: black;
  background-color: #FFF9C4;
  padding: 5px;
  border: 1px solid #FBC02D;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.ink-panel-content {
  display: none;
}

.ink-panel-content.active {
  display: block;
}

.nn-list .neighbor {
  font-size: 12px;
  margin-bottom: 6px;
}

.nn-list .neighbor .value {
  float: right;
  color: #666;
  font-weight: 300;
}

.nn-list .neighbor .bar {
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 2px 0;
}

.nn-list .neighbor .bar .fill {
  position: absolute;
  top: -1px;
  border-top: 1px solid white;
}

.nn-list .neighbor .tick {
  position: absolute;
  top: 0px;
  height: 3px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.nn-list .neighbor-link:hover {
  cursor: pointer;
}

.origin text {
  font-size: 12px;
  font-weight: 500;
}

.origin line {
  stroke: black;
  stroke-opacity: 0.2;
}

/* Ink Framework */

/* - Buttons */
.ink-button, ::shadow .ink-button {
  border: none;
  border-radius: 2px;
  font-size: 13px;
  padding: 10px;
  min-width: 100px;
  flex-shrink: 0;
  background: #e3e3e3;
}

/* - Tabs */

.ink-tab-group {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  height: 100%;
  margin: 0 12px;
}

.ink-tab-group .ink-tab {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  line-height: 60px;
  cursor: pointer;
  padding: 0 12px;
}

.ink-tab-group .ink-tab:hover {
  color: black;
}

.ink-tab-group .ink-tab.active {
  font-weight: 500;
  color: black;
  border-bottom: 2px solid black;

}

/* - Panel */

.ink-panel {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.45em;
}

.ink-panel h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.ink-panel-header {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ink-panel-metadata-container span {
  font-size: 16px;
}

.ink-panel-metadata {
  border-bottom: 1px solid #ccc;
  display: table;
  padding: 10px 0;
  width: 100%;
}

.ink-panel-metadata-row {
  display: table-row;
}

.ink-panel-metadata-key {
  font-weight: bold;
}

.ink-panel-metadata-key,
.ink-panel-metadata-value {
  display: table-cell;
  padding-right: 10px;
}

.ink-panel-buttons {
  margin-bottom: 10px;
}

.ink-panel-content {
  padding: 24px;
  overflow-y: auto;
}

.ink-panel-content .distance a {
  text-decoration: none;
  color: black;
}

.ink-panel-content .distance a.selected {
  color: black;
  border-bottom: 2px solid black;
}

.ink-panel-footer {
  display: flex;
  align-items: center;
  border-top: solid 1px #eee;
  height: 60px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.5);
}

.ink-panel-content h3 {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 5px;
}

.ink-panel-header h3 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 60px;
  text-transform: uppercase;
  padding: 0 24px;
}

/* - Menubar */

.ink-panel-menubar {
  position: relative;
  height: 60px;
  border-bottom: solid 1px #eee;
  padding: 0 24px;
}

.ink-panel-menubar .material-icons {
  color: black;
}

.ink-panel-menubar .menu-button {
  margin-right: 12px;
  cursor: pointer;
  line-height: 60px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 200;
  padding: 0;
  margin: 0 20px 0 0;
  outline: none;
  color: #666;
}

.ink-panel-menubar button .material-icons {
  position: relative;
  top: 7px;
  margin-right: 8px;
  color: #999;
}

.ink-panel-menubar button.selected,
.ink-panel-menubar button.selected .material-icons {
  color: #880E4F;
}

.ink-panel-menubar .ink-fabs {
  position: absolute;
  right: 24px;
  top: 60px;
  z-index: 1;
}

.ink-panel-menubar .ink-fabs .ink-fab {
  position: relative;
  top: -20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  border-radius: 50%;
  display: inline-block;
  background: white;
  margin-left: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.ink-panel-menubar .ink-fabs .ink-fab .material-icons {
  margin: 0;
  display: block;
  line-height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
}

.ink-panel-menubar .search-box {
  transition: width .2s;
  margin-left: -65px;
  width: 0;
  margin-right: 65px;
  background: white;
}

.two-way-toggle {
  display: flex;
  flex-direction: row;
}

.two-way-toggle span {
  padding-right: 7px;
}

paper-listbox .pca-item {
  cursor: pointer;
  min-height: 17px;
  font-size: 12px;
  line-height: 17px;
}

.has-border {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet" type="text/css">
<div id="wrapper-notify-msg">
  <div id="notify-msg">Loading...</div>
</div>
<div id="container">
  <div id="left-pane" class="ink-panel">
    <div class="ink-panel-header">
      <div class="ink-tab-group">
        <div data-tab="tsne" class="ink-tab" title="t-distributed stochastic neighbor embedding">t-SNE</div>
        <div data-tab="pca" class="ink-tab" title="Principal component analysis">PCA</div>
        <div data-tab="custom" class="ink-tab" title="Linear projection of two custom vectors">Custom</div>
      </div>
    </div>
    <!-- TSNE Controls -->
    <div data-panel="tsne" class="ink-panel-content">
      <p><a href="https://en.wikipedia.org/wiki/T-distributed_stochastic_neighbor_embedding">t-distributed stochastic neighbor embedding</a> is a dimensionality reduction technique</p>
      <p style="color: #880E4F; font-weight: bold;">For fast results, your data will be sampled down to 10,000 points.</p>
      <div class="slider"><label>Dimension</label><div class="two-way-toggle"><span>2D</span><paper-toggle-button id="tsne-toggle" noink checked>3D</paper-toggle-button></div></div>
      <div class="slider tsne-perplexity">
        <label>Perplexity</label>
        <input type="range" min="2" max="100"></input>
        <span></span>
      </div>
      <div class="slider tsne-learning-rate">
        <label>Learning rate</label>
        <input type="range" min="-3" max="2"></input>
        <span></span>
      </div>
      <p>The most appropriate perplexity value depends on the density of your data. Loosely speaking, one could say that a larger / denser dataset requires a larger perplexity. Typical values for the perplexity range between 5 and 50.</p>
      <p>The most appropriate learning rate depends on the size of your data, with smaller datasets requiring smaller learning rates.</p>
      <p>
        <button class="run-tsne ink-button">Run</button>
        <button class="stop-tsne ink-button">Stop</button>
      </p>
      <p>Iteration: <span class="run-tsne-iter">0</span></p>
    </div>
    <!-- PCA Controls -->
    <div data-panel="pca" class="ink-panel-content">
      <p><a href="https://en.wikipedia.org/wiki/Principal_component_analysis">Principal component analysis</a> is a dimensionality reduction technique</p>
      <label>X</label>
      <paper-listbox class="has-border" selected="{{pcaX}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
      <br/>
      <label>Y</label>
      <paper-listbox class="has-border" selected="{{pcaY}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
      <br/>
      <paper-checkbox noink id="z-checkbox" checked="{{hasPcaZ}}">Z</paper-checkbox>
      <paper-listbox class="has-border" disabled="true" selected="{{pcaZ}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item disabled="[[!hasPcaZ]]" class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
    </div>
    <!-- Custom Controls -->
    <div data-panel="custom" class="ink-panel-content">
      <p>Search for two vectors upon which to project all points. Use <code>/regex/</code> to signal a regular expression, otherwise does an exact match.<p>
      <h3>Horizontal</h3>
      <div class="control xLeft">
        <label>Left</label>
        <input type="text" value="/\./"></input>
        <span class="info"></span>
      </div>
      <div class="control xRight last">
        <label>Right</label>
        <input type="text" value="/!/"></input>
        <span class="info"> </span>
      </div>
      <h3>Vertical</h3>
      <div class="control yUp">
        <label>Up</label>
        <input type="text" value="/./"></input>
        <span class="info"> </span>
      </div>
      <div class="control yDown last">
        <label>Down</label>
        <input type="text" value="/\?/"></input>
        <span class="info"> </span>
      </div>
    </div>
  </div>
  <div id="main" class="ink-panel">
    <div class="ink-panel-menubar">
      <button class="menu-button search" title="Search">
        <i class="material-icons">search</i>
        <span class="button-label">Search</span>
      </button>
      <div class="control search-box">
          <input type="text" value="">
          <span class="info"></span>
      </div>
      <button class="menu-button selectMode" title="Bounding box selection">
        <i class="material-icons">photo_size_select_small</i>
        Select
      </button>
      <button class="menu-button nightDayMode" title="Toggle between night and day mode">
        <i class="material-icons">brightness_2</i>
        Night Mode
      </button>
      <div class="ink-fabs">
        <div class="ink-fab reset-zoom" title="Zoom to fit all">
          <i class="material-icons resetZoom">home</i>
        </div>
        <div class="ink-fab zoom-in" title="Zoom in">
          <i class="material-icons">add</i>
        </div>
        <div class="ink-fab zoom-out" title="Zoom out">
          <i class="material-icons">remove</i>
        </div>
      </div>
    </div>
    <div class="stage">
      <div id="scatter"></div>
    </div>
    <div id="info-panel" class="ink-panel-footer">
      <div>
        Number of data points: <span class="numDataPoints"></span>, dimension of embedding: <span class="dim"></span>
        | <span id="hoverInfo"></span>
      </div>
    </div>
  </div>
  <div id="right-pane" class="ink-panel">
    <div class="ink-panel-header">
      <div class="ink-tab-group">
        <div data-tab="data" class="active ink-tab" title="Setup data">Data</div>
        <div data-tab="inspector" class="ink-tab" title="Inspect data">Inspector</div>
      </div>
    </div>

    <!-- Inspector UI controls -->
    <div data-panel="inspector" class="ink-panel-content">
      <div class="ink-panel-metadata-container" style="display: none">
        <span>Metadata</span>
        <div class="ink-panel-metadata"></div>
      </div>
      <div class="ink-panel-buttons">
        <div style="margin-bottom: 10px">
          <button style="display: none;" class="ink-button reset-filter">Show All Data</button>
        </div>
        <button style="display: none;" class="ink-button set-filter">Isolate selection</button>
        <button class="ink-button clear-selection" style="display: none;">Clear selection</button>
      </div>
      <div class="slider num-nn">
        <label>Number of neighbors</label>
        <input type="range" min="5" max="1000"></input>
        <span></span>
      </div>
      <div class="distance">
        Distance:
        <div style="float:right">
          <a class="selected cosine" href="javascript:void(0);">cosine</a> |
          <a class="euclidean" href="javascript:void(0);">euclidean</a>
        </div>
      </div>
      <p>Nearest points to <b id="nn-title"></b></p>
      <div class="nn-list"></div>
    </div>

    <!-- Data UI controls -->
    <div data-panel="data" class="active ink-panel-content">
      <vz-projector-data-loader data-source="{{dataSource}}" label-option="{{labelOption}}" color-option="{{colorOption}}"></vz-projector-data-loader>
    </div>
  </div>
</div>
</template>
</dom-module>
